import * as React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import screen from '../utils/screen';
import Images from '../images/images';
import TouchableView from './touchableView';
import {useNavigation} from '@react-navigation/native';
import Battery from './battery';

const DeviceListItem  = ({data,isConnect,battery,onConnect})=>{

    const navigation = useNavigation()
    console.log('isConnect--',isConnect);

    let imageSource = Images.device02
    if(data.name.includes('TABE01')){
        imageSource = Images.device01
    }


    return (
        <View
            style={styles.container}
        >
            <View style={{flexDirection:'row',justifyContent:'space-between'}}>

                <Text style={{fontSize:16,color:'#333',fontWeight:'bold'}}>终端:{data.localName ?? data.name}</Text>

                {
                    isConnect && battery > 0 ? (
                        <Battery
                            // style={{position:'absolute',top:10,right:10}}
                            battery={battery}
                        />
                    ) : null
                }
            </View>
            <View style={styles.content}>
                <Image source={imageSource} style={styles.imageStyle} resizeMode={'contain'}/>
                <View style={{flex:1,marginLeft:screen.PIXEL_20,justifyContent:'space-between'}}>
                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                        <View style={{flexDirection:'row',alignItems:'center',height:screen.PIXEL_40}}>
                            <Text style={{fontSize:11,color:'#999'}}>状态:</Text>
                            <Image source={isConnect ? Images.connect : Images.disconnect} style={{width:screen.PIXEL_18,height:screen.PIXEL_18}}/>
                            <Text style={{fontSize:11,color:'#999'}}>{isConnect ? '已连接' : '未连接'}</Text>
                        </View>

                        <Text style={{textDecorationLine:'underline'}}
                              onPress={()=>onConnect()}
                        >{isConnect ? '断开连接'  : '连接终端'}</Text>
                    </View>
                    <Text style={{fontSize:13,color:'#999'}}>{data.name}</Text>
                    <Text style={{fontSize:13,color:'#999'}} numberOfLines={1}>ID: {data.id}</Text>
                </View>
            </View>



            {
                isConnect && (
                    <View style={styles.btnWrap}>
                        <TouchableView
                            style={styles.btnBg}
                            onPress={()=>{
                                navigation.navigate('Template',{data})
                            }}
                        >
                            <Image source={Images.contact} style={{width:screen.PIXEL_30,height:screen.PIXEL_30}} resizeMode={'contain'}/>
                            <Text style={{color:'#333',fontSize:13,marginLeft:screen.PIXEL_16}}>查看模板</Text>
                        </TouchableView>

                        <TouchableView
                            style={styles.btnBg}
                            onPress={()=>{
                                navigation.navigate('Contact',{data})
                            }}
                        >
                            <Image source={Images.contact} style={{width:screen.PIXEL_30,height:screen.PIXEL_30}} resizeMode={'contain'}/>
                            <Text style={{color:'#333',fontSize:13,marginLeft:screen.PIXEL_16}}>查看联系人</Text>
                        </TouchableView>

                    </View>
                )
            }



        </View>
    )
}

export default DeviceListItem

const styles = StyleSheet.create({
    container:{
        width:'100%',backgroundColor:'#fff',borderRadius:screen.PIXEL_20,
        padding:screen.PIXEL_30,marginBottom:screen.PIXEL_30
    },
    content:{
        flexDirection:'row',marginTop:screen.PIXEL_20
    },
    imageStyle:{
        width:screen.PIXEL_164,height:screen.PIXEL_164
    },
    btnWrap:{
        flexDirection: 'row',justifyContent:'space-between',marginTop: screen.PIXEL_20
    },
    btnBg:{
        backgroundColor:'#fff',borderRadius:screen.PIXEL_90,height:screen.PIXEL_80,
        borderWidth:0.3,borderColor:'#999',width:screen.PIXEL_240,
        paddingHorizontal:screen.PIXEL_30,flexDirection:'row',alignItems:"center",
    }
})
